<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue整合bootstrap</title>
  <!--1. 引入bootstrap-->
  <link rel="stylesheet" href="./bootstrap.min.css">
  <script src="./jquery.min.js"></script>
  <script src="./bootstrap.min.js"></script>
  <!--2. 引入vue-->
  <script src="./vue.js"></script>

  <style>
    .container{
      margin-top: 20px;
    }
    .table{
      text-align: center;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="panel panel-primary">
    <!-- Default panel contents -->
    <div class="panel-heading panel-title">
      <h4>商品列表展示</h4>
    </div>
    <!-- Table -->
    <table class="table table-bordered table-hover table-striped">
      <tr>
      <tr class="first">
        <td>商品编号</td>
        <td>商品名称</td>
        <td>商品单价</td>
        <td>商品数量</td>
        <td>小计(￥)</td>
        <td>操作</td>
      </tr>
      <tr v-for="p in products" :key="p.pid">
        <td>{{p.pid}}</td>
        <td>{{p.pname}}</td>
        <td>{{p.price}}</td>
        <td>{{p.num}}</td>
        <td>{{p.num * p.price}}</td>
        <td>
          <div class="btn-group-sm">
            <a href="#" class="btn btn-default btn-xs" @click="updateProduct(p)">修改</a>
            <a href="#" class="btn btn-danger btn-xs">删除</a>
          </div>
        </td>
      </tr>
    </table>
    <div class="panel-footer text-right">
      <a href="#" class="btn btn-warning btn-sm" @click="addProduct">添加商品</a>
      冶金职业技术学院2025.
    </div>
  </div>

  <!-- Modal -->
  <div class="modal fade" id="myModal" >
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" >{{title}}</h4>
        </div>
        <div class="modal-body">
          <form class="form-horizontal" v-model="product">
            {{product}}
            <div class="form-group">
              <label  class="col-sm-2 control-label">商品编号:</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" v-model="product.pid" placeholder="商品编号">
              </div>
            </div>
            <div class="form-group">
              <label  class="col-sm-2 control-label">商品名称:</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" v-model="product.pname" placeholder="商品名称">
              </div>
            </div>

            <div class="form-group">
              <label  class="col-sm-2 control-label">商品价格:</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" v-model="product.price" placeholder="商品价格">
              </div>
            </div>
            <div class="form-group">
              <label  class="col-sm-2 control-label">购买数量:</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" v-model="product.num" placeholder="购买数量">
              </div>
            </div>

          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭(&C)</button>
          <button type="button" class="btn btn-primary">保存(&S)</button>
        </div>
      </div>
    </div>
  </div>
</div>

</body>
</html>
<script>
  let vs = new Vue({
    el: '.container',
    data:{
      products: [],
      product: {},
      title: '添加商品',
      productSearch:{price1:1,price2:20000},     // 要查询的商品信息
    },
    // vue对象创建完成自动调用（生命周期函数），在此生命周期函数调用后端代码
    created(){
      this.init()
    },
    methods:{
      // 0. 初始化函数
      init(){
        this.products = [
          {"pid":1001,"pname":"飘柔洗发水","price":40,"num":20},
          {"pid":1002,"pname":"ThinkPad X1电脑","price":12000,"num":5},
          {"pid":1003,"pname":"格力空调","price":5000,"num":12},
          {"pid":1004,"pname":"小米手机","price":3500,"num":15},
          {"pid":1005,"pname":"七匹狼外套","price":1200,"num":10},
          {"pid":1006,"pname":"华为电脑","price":10000,"num":6},
          {"pid":1007,"pname":"联想电脑","price":8000,"num":10},
          {"pid":1008,"pname":"HP电脑","price":8500,"num":9},
          {"pid":1009,"pname":"ViVO手机","price":2800,"num":8},
          {"pid":1010,"pname":"美的空调","price":4300,"num":25},
        ]
      },
      // 1. 搜索商品
      searchProduct(){
        // 1.0 恢复原来所有商品的数据
        this.init()
        // 1.1 根据过滤条件查询商品列表
        // ① 定义数组存放查询到的数据
        let productList = []
        // ② 开始查询
        this.products.forEach(p => {
          if (p.pname.includes(this.productSearch.pname) &&
            (p.price >= this.productSearch.price1 && p.price <= this.productSearch.price2)){
            productList.push(p)
          }
        })
        console.log(productList)
        this.products = productList
      },
      // 2. 删除商品
      deleteProduct(pid){
        // 2.1 根据商品id查找出商品在原数组中的下标
        // 方法一：(findIndex: es6提供的方法)
        // let index = this.products.findIndex(p => p.pid === pid)
        // 方法二：(indexOf: 原来的方法)
        let index = this.products.indexOf(pid)
        console.log("index:",index)
        // 2.2 再删除商品
        if (confirm(`你真的要删除编号为${pid}的商品吗?`)){
          this.products.splice(index,1)     // 参数1：要删除的元素在数组中的下标 参数2：删除的个数
        }
      },
      // 3. 添加商品
      addProduct(){
        // 3.1 修改标题：
        this.title = "添加商品"
        // 3.2 清空表单数据
        this.product = {}
        // 3.3 显示对话框
        $("#myModal").modal("show")
      },
      // 4. 修改商品
      updateProduct(p){
        // 4.1 修改对话框标题
        this.title = "修改商品"
        // 4.2 弹出对话框
        $("#myModal").modal("show")
        // 4.3 为表单赋值
        this.product = p
      }
    }
  })
</script>
